<template>
  <div class="my-blog-page">
    <!-- 用户头部信息 -->
    <div class="user-header">
      <div class="user-avatar">
        <img :src="blogData.avatar" alt="用户头像">
      </div>
      <div class="user-info">
        <h2 class="nickName">{{ blogData.nickName }}</h2>
        <p class="user-desc">记录我的技术成长与生活点滴</p>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-number">{{ blogData.blogCount }}</span>
            <span class="stat-label">文章</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ blogData.collectCount }}</span>
            <span class="stat-label">收藏</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ blogData.bloglikeCount }}</span>
            <span class="stat-label">点赞</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ blogData.commentCount }}</span>
            <span class="stat-label">评论</span>
          </div>
        </div>
      </div>
      <div class="user-actions">
        <el-button type="primary" icon="el-icon-edit" @click="addBlog">写博客</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="content-container">
        <!-- 左侧内容 -->
        <div class="left-content">
          <!-- 文章管理 -->
          <div class="section">
            <div class="section-header">
              <h2><i class="el-icon-document"></i>我的博客</h2>
              <div class="article-filter">
                <el-select @change="getBlogListByCategory(queryParams.category)" v-model="queryParams.category" placeholder="请选择类别" clearable>
                  <el-option
                    v-for="dict in dict.type.blog_cat"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </div>
            </div>
            <!-- 表格 -->
            <div class="article-list">
              <el-table ref="table" highlight-current-row
                        :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                        height="300" class="fixedTableTwo" v-loading="loading" :data="myBlogList">
                <el-table-column label="序号" align="center" type="index" :index="indexMethod"/>
                <el-table-column show-overflow-tooltip label="标题" align="center" prop="title">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleBlogDetail(scope.row)">
                      <el-link type="primary">{{ scope.row.title }}</el-link>
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column label="封面" align="center" prop="cover" width="100">
                  <template slot-scope="scope">
                    <image-preview :src="scope.row.cover" :width="50" :height="50"/>
                  </template>
                </el-table-column>
                <el-table-column label="类别" align="center" prop="category">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.blog_cat" :value="scope.row.category"/>
                  </template>
                </el-table-column>
                <el-table-column label="观看量" align="center" prop="views"/>
                <el-table-column label="点赞数" align="center" prop="blogLikeCount"/>
                <el-table-column label="收藏数" align="center" prop="collectCount"/>
                <el-table-column label="评论数" align="center" prop="commentCount"/>
                <el-table-column label="创建人" align="center" prop="nickName"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                       type="text"
                       icon="el-icon-edit"
                       @click="handleUpdate(scope.row)"
                       >编辑
                    </el-button>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelete(scope.row)"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="pagination">
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>

          </div>
        </div>

      </div>
    </div>

    <!-- 博客详情组件 -->
    <BlogDetail ref="blogDetail"/>
    <AddOrUpdateBlog ref="addOrUpdateBlog" @ok="getList" />
  </div>

</template>

<script>
import {delBlog, listBlog, selectBlogDataByUserId} from "@/api/huacai/blog";
import BlogDetail from "@/views/components/blogDetail/index.vue";
import AddOrUpdateBlog from "@/views/components/AddOrUpdateBlog/index.vue";

export default {
  name: "myBlog",
  components: {AddOrUpdateBlog, BlogDetail},
  dicts: ['blog_cat'],
  data() {
    return {
      blogData: {}, //当前登录用户的博客数据
      loading: false,
      myBlogList: [], //表格数据
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: this.$store.state.user.userId,
        category: null,
      },
      // 总条数
      total: 0,

    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleUpdate(row){
      this.$refs.addOrUpdateBlog.handleUpdate(row)
    },
    addBlog(){
      this.$refs.addOrUpdateBlog.handleAdd()
    },
    //根据博客类别查询博客列表
    getBlogListByCategory(category) {
      this.queryParams.category = category
      this.getList()
    },
    getList() {
      //查询当前登录用户的博客数据
      selectBlogDataByUserId().then(res => {
        this.blogData = res.data
        this.blogData.avatar = process.env.VUE_APP_BASE_API + this.blogData.avatar
      })
      //查询博客列表数据
      this.loading = true
      listBlog(this.queryParams).then(response => {
        this.myBlogList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

    },
    /** 自定义序号 */
    indexMethod(index) {
      let pageNum = this.queryParams.pageNum - 1;
      if ((pageNum !== -1 && pageNum !== 0)) {
        return (index + 1) + (pageNum * this.queryParams.pageSize);
      } else {
        return (index + 1)
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const blogIds = row.blogId;
      this.$modal.confirm('确定删除选中记录？').then(function () {
        return delBlog(blogIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    //打开博客详情
    handleBlogDetail(row) {
      this.$refs.blogDetail.handleOpen(row.blogId)
    }


  }

}
</script>
<style scoped>
.my-blog-page {
  background-color: #f5f7fa;
}

/* 用户信息头部 */
.user-header {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 30px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30px;
  border: 4px solid #f0f2f5;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.nickName {
  margin: 0 0 10px;
  font-size: 24px;
  color: #333;
}

.user-desc {
  margin: 0 0 15px;
  color: #666;
  font-size: 14px;
}

.user-stats {
  display: flex;
}

.stat-item {
  margin-right: 30px;
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.user-actions {
  width: 200px;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

.content-container {
  display: flex;
}

.left-content {
  flex: 1;
  margin-right: 20px;
}

/* 区块样式 */
.section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.section-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
}

.section-header i {
  margin-right: 8px;
  color: #409eff;
}

.article-filter {
  display: flex;
  align-items: center;
}

.article-filter .el-select {
  width: 120px;
  margin-right: 10px;
}

/* 文章列表 */
.article-list {
  padding: 0;
}

.article-title-link {
  color: #333;
  text-decoration: none;
  margin-right: 8px;
}

.article-title-link:hover {
  color: #409eff;
}

.pagination {
  padding: 2px 2px;
  text-align: right;
  border-top: 1px solid #ebeef5;
}

.summary-item .label {
  display: block;
  font-size: 12px;
  color: #909399;
  margin-bottom: 5px;
}

.summary-item .value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
</style>
